<template>
    <div>
        <h3>理箱报告</h3>
        <el-form :inline="true" ref="form" :model="form" class="detail-form" label-width="110px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="计划编号：">
                        {{ form.shipPlanNo }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="船名：" prop="shipName">
                        {{ form.shipName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：" prop="voyage">
                        {{ form.voyage }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        {{ form.portName }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="计划类型：" prop="planType">
                        {{ form.planType | _filterShipPlanType }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业状态：" prop="planStatus">
                        {{ form.planStatus | _filterShipPlanStatus }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="完成日期：">
                        {{ form.taskTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="数据来源：">
                        {{ form.planFrom }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间：">
                        {{ form.createDateTime }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.planType==='XC'">
                <el-col :span="8">
                    <el-form-item label="封航日期：">
                        {{ form.feeCloseTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="封航人：">
                        {{ form.closeUser }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="创建时间：">
                        {{ form.createDateTime }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.planType==='XC'">
                <el-col :span="8">
                    <el-form-item label="外理封航日期：">
                        {{ form.closeTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="理箱TEU：">
                        {{ form.tallyTeu }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="放行TEU：">
                        {{ form.releaseTeu }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <h3>作业汇总对比</h3>
        <div class="close-contrast">
            <el-card class="close-contrast-box-card" v-for="(item,index) in contrast" :key="index"
                     :style="index%2===0?'margin-right:3%':''">
                <div class="contrast-text">
                    <div class="contrast-type" :class="item.type">
                        {{ item.type | type }}
                    </div>
                    <div>
                        理货作业 <span> {{ item.tallyNum }}</span>
                    </div>
                    <div>
                        港口作业 <span> {{ item.portNum }}</span>
                    </div>
                    <div>
                        差量 <span class="difference"> {{ item.difference }}</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </el-card>
            <div class="clear"></div>
        </div>
        <h3 class="mt-10">作业明细对比</h3>
        <el-form :inline="true" class="search-form">
            <el-row class="mt-10 ">
                <el-col :span="3">
                    <el-tag size="medium">
                        已选择 {{ multipleSelection.length }} 条数据
                    </el-tag>
                </el-col>
                <!--<el-col :span="4">
                    <el-input
                        placeholder="请输入箱号查询"
                        v-model="searchWords"
                        clearable
                        @keyup.enter.native="searchGo">
                    </el-input>
                </el-col>-->
                <el-col :span="4" label-width="120px" style="width: 275px;">
                    <el-form-item label="箱号">
                        <el-input placeholder="请输入箱号" v-model="searchWords" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="width: 275px;">
                    <el-form-item label="空重">
                        <el-select placeholder="请选择空重" v-model="searchIfHeavy" clearable>
                            <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="width: 300px;">
                    <el-form-item label="内外贸">
                        <el-select placeholder=" 请选择内外贸" v-model="searchTradeType" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <el-form-item>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="width: 300px;">
                    <el-form-item label="船代">
                        <auto-search-custom @selectName="v=>searchShipAgentName=v" :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="width: 300px;">
                    <el-form-item label="装货港" prop="loadPort">
                        <auto-search-port-station 
                            @selectCode="v=>searchLoadPort=v"
                            v-model="searchLoadPort">
                            </auto-search-port-station>
                    </el-form-item>
                </el-col>
                <el-col :span="8" style="width: 300px;">
                    <el-form-item label="结算单位">
                        <auto-search-custom @selectName="v=>searchAccountUnit=v"  v-model="searchAccountUnit"
                                            :isShipAgent="true" :isSpecialForm="true"></auto-search-custom>
                        <!-- <auto-search-custom
                            @selectName="v=>condition['search_EQ_accountUnit']=v" ></auto-search-custom> -->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <el-form-item>
                    </el-form-item>
                </el-col>
                <el-col :span="12" style="width: 300px;">
                    <el-form-item label="尺寸">
                        <autoSearchSize v-model="search_EQ_containerSize"></autoSearchSize>
                    </el-form-item>
                </el-col>
                <el-col :span="8" style="width: 300px;">
                    <el-form-item label="装箱方式" prop="search_EQ_enchaseWay">
                        <el-select v-model="search_EQ_enchaseWay" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictEnchaseWayType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" style="width: 300px;">
                    <el-form-item label="是否残损" prop="search_EQ_isDamaged">
                        <el-select v-model="search_EQ_isDamaged" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <el-form-item>
                    </el-form-item>
                </el-col>
                <el-col :span="8" style="width: 300px;">
                    <el-form-item label="理货人" prop="search_EQ_tallyClerk">
                        <el-select v-model="search_EQ_tallyClerk" filterable placeholder="请选择" @focus="getClerkAndOther(search_EQ_tallyClerk)" @change="getClerkAndOther(search_EQ_tallyClerk)" clearable>
                            <el-option
                                v-for="item in otherOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.label">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" style="width: 300px;">
                    <el-form-item label="卸货港" prop="search_LIKE_unloadPort">
                        <auto-search-port-station 
                            @selectCode="v=>search_LIKE_unloadPort=v"
                            v-model="search_LIKE_unloadPort">
                        </auto-search-port-station>
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="width: 360px;">
                    <el-button type="primary" class="ml-80" @click="searchGo">查询</el-button>
                    <el-button @click="handelRemove" type="danger">删除</el-button>
                    <el-button type="primary" @click="handleAllEdit()">批量修改</el-button>
                </el-col>
            </el-row>
        </el-form>
        <template>
            <el-table ref="multipleTable" :data="table" border stripe max-height="500" class="mt-10"
                      @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" fixed="left"></el-table-column>
                <el-table-column type="index" fixed="left" label="序号" width="55"></el-table-column>
                <!--<el-table-column fixed="left" label="发送EDI" prop="id" width="85">-->
                <!--<template slot-scope="scope">-->
                <!--<el-checkbox v-model="scope.row.isSelect" @change="handleSelectionChange"></el-checkbox>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column prop="containerId" fixed="left" label="箱号"  min-width="120">
                    <template slot-scope="scope">
                        <div v-bg="scope.row.isdiff">
                            <el-tooltip v-if="scope.row.diffContainerId" effect="light"
                                        :content="scope.row.diffContainerId"
                                        placement="top">
                                <div class="diff" @click="getRecordDetail(scope.row)">{{ scope.row.containerId }}</div>
                            </el-tooltip>
                            <el-button :style="scope.row.isdiff?'color:#ffffff':''" v-else size="small" type="text"
                                       @click="getRecordDetail(scope.row)">
                                {{ scope.row.containerId }}
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="containerType" label="箱型"  min-width="80">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.diffContainerType" effect="light"
                                    :content="scope.row.diffContainerType"
                                    placement="top">
                            <div class="diff">{{ scope.row.containerType }}</div>
                        </el-tooltip>
                        <div v-else>
                            {{ scope.row.containerType }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="containerSize" label="尺寸"  min-width="80">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.diffContainerSize" effect="light"
                                    :content="scope.row.diffContainerSize"
                                    placement="top">
                            <div class="diff">{{ scope.row.containerSize }}</div>
                        </el-tooltip>
                        <div v-else>
                            {{ scope.row.containerSize }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.diffTradeType" effect="light" :content="scope.row.diffTradeType"
                                    placement="top">
                            <div class="diff">{{ scope.row.tradeType }}</div>
                        </el-tooltip>
                        <div v-else>
                            {{ scope.row.tradeType }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="ef" label="空重"  min-width="80">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.diffEf" effect="light" :content="scope.row.diffEf"
                                    placement="top">
                            <div class="diff">{{ scope.row.ef }}</div>
                        </el-tooltip>
                        <div v-else>
                            {{ scope.row.ef }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="change" label="中转"  min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.change | _filterIsChange }}
                    </template>
                </el-table-column>
                <el-table-column prop="enchaseWay" label="装箱方式"  min-width="110">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.diffEnchaseWay" effect="light" :content="scope.row.diffEnchaseWay =='无'?'无装箱方式':scope.row.diffEnchaseWay"
                                    placement="top">
                            <div class="diff">{{ scope.row.enchaseWay }}</div>
                        </el-tooltip>
                        <div v-else>
                            {{ scope.row.enchaseWay }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sealNo" label="铅封号"  min-width="110">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.diffSealNo" effect="light" :content="scope.row.diffSealNo == '无' ? '无铅封号' : scope.row.diffSealNo"
                                    placement="top">
                            <div class="diff">{{ scope.row.sealNo }}</div>
                        </el-tooltip>
                        <div v-else>
                            {{ scope.row.sealNo }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="isDamaged" label="残损"  min-width="80">
                    <template slot-scope="scope">
                        <div :style="scope.row.isDamaged?'color:red':''">{{ scope.row.isDamaged | _filterTrueOrFalse }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="shipAgentName" label="船代"  min-width="220">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.diffShipAgentName" effect="light" :content="scope.row.diffShipAgentName"
                                    placement="top">
                            <div class="diff">{{ scope.row.shipAgentName }}</div>
                        </el-tooltip>
                        <div v-else>
                            {{ scope.row.shipAgentName }}
                        </div>
                    </template>
                </el-table-column>
                <!--<el-table-column prop="feeCloseTime" label="船公司"  min-width="180"></el-table-column>-->
                <el-table-column prop="loadPort" label="装货港"  min-width="100"></el-table-column>
                <el-table-column prop="unloadPort" label="卸货港"  min-width="100"></el-table-column>
                <el-table-column prop="tallyClerk" label="理货人"  min-width="110"></el-table-column>
                <el-table-column prop="tallyTime" label="理货时间"  min-width="160"></el-table-column>
                <el-table-column fixed="right" align="center" label="操作"  width="140">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center" class="mt-20">
                <!--<el-button @click="handleEDI(true)">发送EDI</el-button>-->
                <el-button type="primary" @click="toggleSelection(table)">选择外贸重箱</el-button>
                <el-button type="primary" @click="handleSelect(true)">确认封航</el-button>
                <el-button type="primary" @click="handleSelect(false)">退回作业</el-button>
                <!--<el-button>取消</el-button>-->
            </el-row>
        </template>
        <el-dialog title="选择封航日期" :visible.sync="dialogVisible" width="400px">
            <el-row type="flex" justify="center" class="mt-20">
                <el-date-picker v-model="closeTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="选择日期"></el-date-picker>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSure" :loading="$store.getters.loadingBtn">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="理箱作业批量修改" :visible.sync="dialogAllEditVisible" width="720px">
            <el-form :inline="true"  class="detail-form" label-width="110px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="">
                            <span style="margin-left: 100px;">已选择{{multipleSelection.length}}条数据</span>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="12">
                        <el-form-item label="船代">
                            <auto-search-custom @selectCode="v=>editForm.shipAgentName=v" :isShipAgent="true"></auto-search-custom>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="空重">
                            <el-select placeholder="请选择空重" v-model="editForm.ifHeavy" clearable>
                                <el-option v-for="[key, val] in _dictIfHeavyType" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="12">
                        <el-form-item label="内外贸">
                            <el-select placeholder=" 请选择内外贸" v-model="editForm.tradeType" clearable>
                                <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="中转">
                            <el-select v-model="editForm.change" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictIsChange" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="12">
                        <el-form-item label="尺寸">
                            <autoSearchSize v-model="editForm.containerSize"></autoSearchSize>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="箱型">
                            <auto-search-entrust v-model="editForm.containerType" :name="editForm.containerType"></auto-search-entrust>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                        <el-form-item label="装箱方式：" prop="enchaseWay">
                            <el-select v-model="editForm.enchaseWay" placeholder="请选择" clearable>
                                <el-option v-for="[key, val] in _dictEnchaseWayType" :key="key" :label="val" :value="key">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="24">
                        <el-form-item label="">
                            <span style="margin-left: 100px;color: #999999;">提示:以上内容不为空,进行数据修改。为空时该字段不做修改。</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogAllEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAllEdit" :loading="$store.getters.loadingBtn">保 存</el-button>
            </span>
        </el-dialog>
        <record-form v-if="dialogForm" ref="recordForm" @load="loadData"></record-form>
        <record-detail v-if="recordDetail" @close="recordDetail=false" ref="recordDetail"></record-detail>
    </div>
</template>

<script>
    import {
        getSureClose,
        getCloseContrast,
        getClosePlanInfo,
        confirmClose,
        shipPlanSealedEdi,
        returnClose,
        getTallyRecord,
        cancelIceound,
        batchDelTallyRecord,
        batchModSealInfo,
        getTallyClerk
    } from "@/api/shipPlan/shipPlan";
    import { ifHeavyType, tradeType, enchaseWayType } from "@/assets/dict";
    import recordForm from './recordForm'
    import recordDetail from './recordDetail'
    import { uploadFileSingle, preview } from "@/api/attachment/attachment";
    import { getLocalTime } from "@/utils/dateFormat";
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom';
    import autoSearchSize from "@/components/autocomplete/autoSearchSize";
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust';
    import autoSearchPortStation from '@/components/autocomplete/autoSearchPortStation'

    export default {
        name: "外理封航",
        components: {
            recordForm, recordDetail, autoSearchCustom, autoSearchSize, autoSearchEntrust,autoSearchPortStation
        },
        data() {
            return {
                form: {},
                contrast: {},
                table: [],
                tempData: [],
                multipleSelection: [],
                otherOptions : [],
                id: '',
                searchWords: '',
                searchIfHeavy:'',
                searchTradeType:'',
                searchShipAgentName:'',
                searchLoadPort:'',
                searchAccountUnit:'',
                search_EQ_containerSize: '',
                search_EQ_enchaseWay: '',
                search_EQ_isDamaged: null,
                search_LIKE_unloadPort: '',
                search_EQ_tallyClerk: '',
                dialogVisible: false,
                dialogAllEditVisible:false,
                dialogForm: false,
                recordDetail: false,
                closeTime: getLocalTime(new Date().getTime() - (24 * 3600 * 1000), 'YYYY-MM-DD'),
                editForm: {
                    tradeType : '',
                    shipAgentName :'',
                    enchaseWay: '',
                    ifHeavy:'',
                    change:'',
                    containerSize:'',
                    containerType:''
                }
            }
        },
        directives: {
            bg: {
                inserted(el, binding) {
                    if (binding.value) {
                        el.parentNode.parentNode.style.backgroundColor = '#ff0000'
                        el.style.color = '#ffffff'
                    }
                },
                update(el, binding) {
                    if (binding.value) {
                        el.parentNode.parentNode.style.backgroundColor = '#ff0000'
                        el.style.color = '#ffffff'
                    } else {
                        el.parentNode.parentNode.style.backgroundColor = 'white'
                        el.style.color = '#ffffff'
                    }
                },
            }
        },
        mounted() {
            this.getData();
        },
        activated() {
            this.getData()
        },
        methods: {
            loadData() {
                getClosePlanInfo(this.id).then(res => {
                    this.form = res.data;
                })
                getCloseContrast(this.id).then(res => {
                    this.contrast = res.data.aaData
                })
                let params = {
                    search_EQ_isTally: '1'
                }
                if (this.searchWords != '' && this.searchWords != null){
                    this.$set(params, 'search_LIKE_containerId', this.searchWords)
                }
                if (this.searchIfHeavy != '' && this.searchIfHeavy != null){
                    this.$set(params, 'search_EQ_ef', this.searchIfHeavy)
                }
                if (this.searchTradeType != '' && this.searchTradeType != null){
                    this.$set(params, 'search_EQ_tradeType', this.searchTradeType)
                }
                if (this.searchShipAgentName != '' && this.searchShipAgentName != null){
                    this.$set(params, 'search_EQ_shipAgentName', this.searchShipAgentName)
                }
                if (this.searchLoadPort != '' && this.searchLoadPort != null){
                    this.$set(params, 'search_EQ_loadPort', this.searchLoadPort)
                }
                if (this.searchAccountUnit != '' && this.searchAccountUnit != null){
                    this.$set(params, 'search_EQ_accountUnit', this.searchAccountUnit)
                }
                if (this.search_EQ_containerSize != '' && this.search_EQ_containerSize != null){
                    this.$set(params, 'search_EQ_containerSize', this.search_EQ_containerSize)
                }
                if (this.search_EQ_enchaseWay != '' && this.search_EQ_enchaseWay != null){
                    this.$set(params, 'search_EQ_enchaseWay', this.search_EQ_enchaseWay)
                }
                if (this.search_EQ_isDamaged != '' && this.search_EQ_isDamaged != null){
                    this.$set(params, 'search_EQ_isDamaged', this.search_EQ_isDamaged)
                }
                if (this.search_EQ_tallyClerk != '' && this.search_EQ_tallyClerk != null){
                    this.$set(params, 'search_EQ_tallyClerk', this.search_EQ_tallyClerk)
                }
                if (this.search_LIKE_unloadPort != '' && this.search_LIKE_unloadPort != null){
                    this.$set(params, 'search_LIKE_unloadPort', this.search_LIKE_unloadPort)
                }
                getSureClose(this.id, params).then(res => {
                    this.table = res.data.aaData;
                    this.table.map(m => {
                        m.ef = ifHeavyType.get(m.ef)
                        m.diffEf = ifHeavyType.get(m.diffEf)
                        m.tradeType = tradeType.get(m.tradeType)
                        m.diffTradeType = tradeType.get(m.diffTradeType)
                        m.enchaseWay = enchaseWayType.get(m.enchaseWay)
                        /*m.diffEnchaseWay = enchaseWayType.get(m.diffEnchaseWay)*/
                        // if (m.isSendCustoms === '1') {
                        //     this.$nextTick(() => {
                        //         this.$refs.multipleTable.toggleRowSelection(m)
                        //     })
                        // }
                    })
                    this.tempData = JSON.parse(JSON.stringify(this.table))
                    this.$nextTick(() => {
                        this.toggleSelections(this.table);
                    })

                })
            },
            getClerkAndOther(val){
                let params = {
                    search_LIKE_personName: val
                }
                getTallyClerk(params).then(res=>{
                    let dts = res.data.aaData
                    dts.forEach(el =>{
                        el.value = el.id
                        el.label = el.personName
                    })
                    this.otherOptions = dts
                })
            },
            handleEdit(id) {
                getTallyRecord(id).then(res => {
                    this.dialogForm = true
                    this.$nextTick(() => {
                        this.$refs.recordForm.dialogForm = true
                        this.$refs.recordForm.form = res.data
                        this.$refs.recordForm.form.damagedCode = res.data.damagedCode ? res.data.damagedCode.split(',') : []
                        if (res.data.damageSign) {
                            preview(res.data.damageSign[0].id).then(response => {
                                let url = response.data
                                let strUrl = response.data.substr(0, url.length - 2)
                                this.$refs.recordForm.url = strUrl.substr(url.indexOf('=') + 1, strUrl.length)
                            })
                        }

                    })
                })
            },
            handleSelect(bool) {
                // if (this.multipleSelection.length === 0) {
                //     this.$message({ message: '请先选择数据!', type: 'error' })
                //     return
                // }
                bool ? this.dialogVisible = true : this.handleReturn()

            },


            //选择外贸重箱
            toggleSelection(rows) {
                let arrow = [];
                for (let i = 0; i < rows.length; i++) {
                    if (rows[i].ef === "重" && rows[i].tradeType === "外贸") {
                        arrow.push(rows[i])
                    }
                }
                let ids = ''
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    const el = this.multipleSelection[i]
                    ids = ids + ',' + el.id
                }
                ids = ids.substr(1)
                arrow.forEach(row => {
                    if (!(ids.indexOf(row.id)!== -1)) {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    }
                });

            },

            toggleSelections(rowss) {
                let arrow = [];
                for (let i = 0; i < rowss.length; i++) {
                    if (rowss[i].ef === "重" && rowss[i].tradeType === "外贸") {
                        arrow.push(rowss[i])
                    }
                }
                arrow.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });

            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },

            handleAllEdit(){
                if (this.multipleSelection == null || this.multipleSelection == ""){
                    this.$message({
                        type: 'warning',
                        message: '请勾选修改项'
                    });
                    return
                }
                this.dialogAllEditVisible = true
            },

            doAllEdit(){
                let data = {}
                let isEdit = false
                let id = ""
                this.multipleSelection.forEach((item, index) => {
                    id = id + "," + item.id
                })
                this.$set(data, "tallyDetailIds", id.substring(1))
                if (this.editForm.tradeType != ""){
                    this.$set(data, "tradeType", this.editForm.tradeType)
                    isEdit = true
                }
                if (this.editForm.ifHeavy != ""){
                    this.$set(data, "ef", this.editForm.ifHeavy)
                    isEdit = true
                }
                if (this.editForm.shipAgentName != ""){
                    this.$set(data, "shipAgentCode", this.editForm.shipAgentName)
                    isEdit = true
                }
                if (this.editForm.change != ""){
                    this.$set(data, "change", this.editForm.change)
                    isEdit = true
                }
                if(this.editForm.containerSize != ""){
                    this.$set(data, "containerSize", this.editForm.containerSize)
                    isEdit = true
                }
                if(this.editForm.containerType != ""){
                    this.$set(data, "containerType", this.editForm.containerType)
                    isEdit = true
                }
                if(this.editForm.enchaseWay != ""){
                    this.$set(data, "enchaseWay", this.editForm.enchaseWay)
                    isEdit = true
                }
                if (isEdit){
                    batchModSealInfo(data).then(res => {
                        this.$message({
                            type: 'success',
                            message: '修改成功'
                        });
                        this.dialogAllEditVisible = false
                        this.loadData()
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请填选修改内容'
                    });
                }
            },

            handelRemove(){
                if (this.multipleSelection == null || this.multipleSelection == ""){
                    this.$message({
                        type: 'warning',
                        message: '请勾选删除项'
                    });
                } else {
                    this.$confirm('是否确认删除勾选箱子?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let ids = ''
                        for (let i = 0; i < this.multipleSelection.length; i++) {
                            const el = this.multipleSelection[i]
                            ids = ids + ',' + el.id
                        }
                        ids = ids.substr(1)
                        let params = {
                            detailIds: ids
                        }
                        batchDelTallyRecord(params).then(res => {
                            this.$message({ message: '删除成功!', type: 'success' })
                            this.loadData();
                        })
                    }).catch(() => {

                    })
                }
            },

            handleSure() {
                let list = []
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    const el = this.multipleSelection[i]
                    if(el.diffEf) {
                        this.$message({ message: '理箱明细与计划中的尺寸或空重不一致，请核对并更正！', type: 'error' })
                        this.dialogVisible = false
                        return false;
                    }
                    if(el.diffTradeType) {
                        this.$message({ message: '理箱明细与计划中的内外贸不一致，请核对并更正！', type: 'error' })
                        this.dialogVisible = false
                        return false;
                    }
                    list.push({ id: el.id })
                }
                let data = {
                    closeTime: this.closeTime,
                    list
                }
                confirmClose(this.id, data).then(res => {
                    this.$message({ message: '封航成功!', type: 'success' })
                    this.handleBack()
                })
            },
            handleReturn() {
                returnClose(this.id).then(res => {
                    this.$message({ message: '退回成功!', type: 'success' })
                    this.handleBack()
                })
            },
            handleEDI() {
                if (this.multipleSelection.length === 0) {
                    this.$message({ message: '请先选择数据!', type: 'error' })
                    return
                }
                this.$confirm('确认发送EDI？', '提示', { type: 'warning' }).then(() => {
                    let data = []
                    this.multipleSelection.forEach(f => {
                        data.push({ id: f.id })
                    })
                    shipPlanSealedEdi(data).then(res => {
                        this.$message({ message: '发送成功!', type: 'success' })
                        this.loadData()
                    })
                })
            },
            getRecordDetail(item) {
                this.recordDetail = true
                this.$nextTick(() => {
                    this.$refs.recordDetail.loadData(item.id)
                })
            },
            getData() {
                this.id = sessionStorage.getItem('closeId')
                if (this.id) {
                    this.loadData()
                } else {
                    this.handleBack()
                }
            },
            handleBack() {
                const view = { path: `/work/shipPlan/close`, name: '外理封航' }
                this.$store.dispatch('delVisitedViews', view).then((views) => {
                    if (view.path === this.$route.path) {
                        if (this.form.planType === 'ZC') {
                            this.$router.push({ path: '/work/shipPlan/load', name: '装船计划列表' })
                        } else {
                            this.$router.push({ path: '/work/shipPlan/unload', name: '卸船计划列表' })
                        }
                    } else {
                        this.$message({ message: '服务器错误!', type: 'error' })
                    }
                })
            },
            searchGo(){
                this.loadData()
                /*let arr = [];
                if(this.searchWords!==''){
                    for(let i=0;i<this.tempData.length;i++){
                        if(this.tempData[i].containerId.indexOf(this.searchWords)>=0){
                            arr.push(this.tempData[i]);
                        }
                    }
                    this.table = arr
                }else {
                    this.table = this.tempData
                }*/
            }
        },
        filters: {
            type(val) {
                switch (val) {
                    case 'total':
                        return '总箱量'
                        break
                    case 'I':
                        return '内贸'
                    case 'O':
                        return '外贸'
                    case 'change':
                        return '中转'
                    default:
                        break
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .diff {
        color: red;
        min-width: 50px;
        height: 30px;
    }
</style>
